<template>
  <div class="LabelTitle d-flex flex-column pa-3" @click="test" :style="{ backgroundColor: select ? '#16389C' : '#12266762'}" >
    <div class="d-flex justify-space-between align-center">
      {{title}}
       <i class="el-icon-apple"></i>
    </div>
    <div class="pt-1">
      <span class="warning--text" style="font-size: 1.5rem">{{count}}</span>
      <span>/</span>
      <span class="success--text">{{sum}}</span>
    </div>
  </div>
</template>
<script>
/**
 * t-title 标题组件
 *
 * 参数
 * String title 标题文本 默认 空
 * String icon  图标形状 默认 空
 * Number count 显示数量 默认 0
 * Number sum   显示总和 默认 0
 * Boolean select 选中状态 默认 false
 *
 */
export default {
  doc: {
    name: '标签标题',
    desc: '概览页面中 nav 内容列表'
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    count: {
      type: Number,
      default: 0,
    },
    sum: {
      type: Number,
      default: 0,
    },
    select: {
      type: Boolean,
      default: false
    }
  },
   methods: {
    test:function(){
      console.log()
    }}
};
</script>
<style scoped>
.LabelTitle{
  color: white;
  border-radius: 0.3rem;
  width: 11rem;
  height: 5rem;
  cursor: pointer;
}

</style>